<!--
 * @Description:
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:15:52
-->
<template>

    <div id="leftColumn" style="width: 100%; height: 100%" ></div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  props:{
    yName:Array,
    data1:Array,
    data2:Array,
  },
  data() {
    return {
      charts:null,
    };
  },
  beforeDestroy() {
    if (!this.charts) {
      return
    }
    /* 释放图表实例 */
    this.charts.dispose()
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.charts = null
  },
  created() {},
  mounted(){
    this.$nextTick(function() {
      this.initTopBarChart();
    })
  },

  methods: {
    initTopBarChart() {
      this.charts = echarts.init(this.$el);
      this.setOptions();
      //根据浏览器宽度变化改变可视化报表图宽高
      window.addEventListener("resize", () => {
        if(this.charts){
          this.charts.resize();
        }
      });
    },
      setOptions(){
      this.charts.setOption({
        title: {
          text: "前七天回收统计",
          left: "left",
          textStyle: {
            color: "#cdddf7",
            fontSize: "14px",
          },
          subtext: '单位: 件',
          subtextStyle: {
            color: "#cdddf7",
          },
        },
        toolbox: {
          show: true,
          right: '4%',
          top: '5%',
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: 20,
          textStyle: {
            color: "#cdddf7",
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#cdddf7",
            },
          },
        },
        yAxis: {
          type: 'category',
          data: this.yName,
          axisLine: {
            lineStyle: {
              color: "#cdddf7",
            },
          },
        },
        series: [
          {
            name: '件数',
            type: 'bar',
            data: this.data1,
            // label: {
            //   show: true, // 开启显示
            //   position: "insideRight", // 在上方显示
            //   verticalAlign: "middle",
            //   textStyle: {
            //     // 数值样式
            //     color: "white",
            //     fontSize: 12,
            //     fontWeight: "bold",
            //   },
            // },
          },
          {
            name: '金额',
            type: 'bar',
            data: this.data2,
            label: {
              show: true, // 开启显示
              position: "insideRight", // 在上方显示
              verticalAlign: "middle",
              textStyle: {
                // 数值样式
                color: "white",
                fontSize: 12,
                fontWeight: "bold",
              },
            },
          }
        ],
      });
    },
    },
};
</script>

<style scoped lang="scss">
</style>
